<template>
  <div class="root">
    <Aparent></Aparent>
  </div>
</template>

<script>
import Aparent from "./components/Aparent.vue";

export default {
  components: {
    Aparent,
  },
  methods: {},
  data() {
    return {
      name: "mikaisa",
    };
  },
  // 很简单，父组件或者祖宗组件这样定义一个provide，里面像data一样return出去一个对象，对象里面是你要传递的数据。不过要注意的是，即使你这里传递的是this.name，是一个响应式数据，但是到了别人手里，就不是了，所以如果你在子组件中inject拿到数据后，进行修改，对于父组件来说是不生效的，唯一的办法就是，你直接把这里的this作为数据传出去，这样子组件就可以操作父组件里的数据了。实现响应式
  provide() {
    return {
      a: this.name,
      app:this
    };
  },
  watch:{
    name(){
      console.log('name被修改了');
    }
  }
};
</script>

<style scoped>
.root {
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: flex-start;
}

div {
  height: 100px;
}
</style>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
